<template>
  <div class="jdselectgoods">
    <div class="jdselectgoods_main">
      <div class="top">
        <div class="top_main">
          <div class="top_left">
            <div>
              <router-link to="/jdselectgoods">
                <i class="iconfont icon_jd_shouye iconhome"></i>
              </router-link>
            </div>
            <div style="margin-left:12px">
              <span style="cursor: pointer;">
                <router-link to="/">首页</router-link>
              </span>
            </div>
            <div v-if="logined" style="margin-left:12px">
              欢迎您：{{ name }}
              <router-link
                :to="{ path: '/admin' }"
                style="margin-left:10px"
                target="_blank"
                tag="a"
              >个人中心</router-link
              >
              <span
                style="cursor: pointer;margin-left:12px"
                @click="dologinout"
              >
                <a>退出</a>
              </span>
            </div>
            <div v-else style="margin-left:12px">
              <router-link
                :to="{
                  path: '/login',
                  query: { active: 'login', redirect: this.$route.fullPath }
                }"
              >登录</router-link
              >
              <router-link
                style="margin-left:12px"
                :to="{
                  path: '/login',
                  query: { active: 'register', redirect: this.$route.fullPath }
                }"
              >注册</router-link
              >
            </div>
          </div>
          <div v-show="searchshow" class="top_center">
            <el-input
              placeholder="支持商品名称和店铺名称搜索"
              v-model.trim="searchipt"
              @change="dosearch"
            >
              <!-- <div slot="prefix">
              <el-radio-group v-model="radio" size="mini">
                <el-radio-button label="1">宝贝</el-radio-button>
                <el-radio-button label="2">店铺</el-radio-button>
              </el-radio-group>
              </div>-->
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
          <div class="top_right">
            <!-- <div class="hot">
              <router-link to="/jdselectgoods">客户服务</router-link>
            </div>-->
            <div>
              <router-link
                to="/admin/auditgoods/mycollect"
              >我的收藏</router-link
              >
            </div>
            <div>
              <router-link to="/cooperation">商家合作</router-link>
            </div>
            <div>
              <router-link to="/settled">招商入驻</router-link>
            </div>
            <div>
              <router-link to="/help">帮助中心</router-link>
            </div>
            <!-- <div>
              <router-link to="/jdselectgoods">招商助手下载</router-link>
            </div>-->
          </div>
        </div>
      </div>
      <div class="header">
        <div class="header_main">
          <div style="height:50.86px">
            <logo></logo>
          </div>
          <div class="header_search">
            <div class="search_top">
              <el-input
                class="search_ipt"
                v-model.trim="searchipt"
                :clearable="true"
                @clear="clearsearch"
                @keyup.enter.native="dosearch"
                placeholder="请输入商品名称或店铺名称"
              ></el-input>
              <!-- <el-input
                class="searchipt_box"
                placeholder="请输入搜索内容"
                v-model.trim="searchipt"
                @change="dosearch"
                clearable
              >
                <span slot="prefix">
                  <el-radio-group
                    v-model="searchchoose"
                    size="medium"
                    style="margin-top: 2px;"
                  >
                    <el-radio-button label="1">宝贝</el-radio-button>
                    <el-radio-button label="2">店铺</el-radio-button>
                  </el-radio-group>
                </span>
              </el-input>-->
              <el-button
                style="width:100px;font-size: 16px;box-sizing: border-box;padding: 11px 23px;"
                type="primary"
                round
                icon="el-icon-search"
                @click="dosearch"
              >搜 索</el-button
              >
            </div>
            <div class="search_hot">
              <a @click="hotSearch('拖鞋')" href="#">拖鞋</a>
              <a @click="hotSearch('睡衣')" href="#">睡衣</a>
              <a @click="hotSearch('手套')" href="#">手套</a>
              <a @click="hotSearch('加湿器')" href="#">加湿器</a>
              <a @click="hotSearch('羽绒服')" href="#">羽绒服</a>
              <a @click="hotSearch('耳机')" href="#">耳机</a>
            </div>
          </div>
          <div
            class="header_action"
            @mouseenter="mainifoshow = true"
            @mouseleave="mainifoshow = false"
          >
            <el-card
              :body-style="{ padding: '0px' }"
              style="border-radius: 12px;background-color: #fafafa;z-index: 100;"
              shadow="never"
            >
              <div
                style="font-size: 14px;padding-top: 8px;padding-bottom: 8px;border-bottom: 1px solid #66666638;font-weight: 500;color: #4d75ff;"
              >
                网站已稳定运行{{ maininfo.day }}天
              </div>
              <div class="header_right" style="padding:5px">
                <div class="display">
                  <div>
                    <p class="head_title">今日总销量</p>
                    <p class="head_num">{{ maininfo.today_num }}</p>
                  </div>
                  <div>
                    <p class="head_title">今日上新商品</p>
                    <p class="head_num">{{ maininfo.today_top_num }}</p>
                  </div>
                  <div>
                    <p class="head_title">实时在线商品</p>
                    <p class="head_num">{{ maininfo.zx_count }}</p>
                  </div>
                </div>
                <el-collapse-transition>
                  <div v-show="mainifoshow" class="header_right" style="width: 100%;">
                    <div class="display">
                      <div >
                        <p class="head_title">今日领劵量</p>
                        <p class="head_num">{{ maininfo.today_coupon_num }}</p>
                      </div>
                      <!-- <div style="width:80px">
                      <p class="head_title">今日总佣金</p>
                      <p class="head_num">{{ maininfo.commission }}</p>
                    </div>
                    <div style="width:80px">
                      <p class="head_title">日活跃用户</p>
                      <p class="head_num">{{ maininfo.today_user_num }}</p>
                    </div> -->
                      <div >
                        <p class="head_title">服务商家数量</p>
                        <p class="head_num">{{ maininfo.shop_num }}</p>
                      </div>
                      <div style="width:60px">

                      </div>
                    </div>
                  </div>
                </el-collapse-transition>
              </div>
            </el-card>
          </div>
        </div>
        <div class="header_menu">
          <div class="menu_main">
            <el-menu
              :default-active="$route.path"
              class="el-menu-demo"
              mode="horizontal"
              :router="true"
              background-color="#ffffff"
              text-color="#000"
              active-text-color="#fff"
            >
              <!-- <el-menu-item index="/jdselectgoods/homepage">
                <div class="menu_item">首页</div>
              </el-menu-item> -->
              <el-menu-item index="/jdselectgoods/realtimelist">
                <div class="menu_item">实时榜单</div>
              </el-menu-item>
              <!-- <el-menu-item
                index="#"
              ><div class="menu_item">品牌专场</div></el-menu-item
              > -->
              <el-menu-item index="/jdselectgoods/allgoods">
                <div class="menu_item">全部商品</div>
              </el-menu-item>
              <el-menu-item index="/jdselectgoods/widge">
                <div class="menu_item">小工具</div>
              </el-menu-item>
              <el-menu-item index="/jdselectgoods/aisystem">
                <div class="menu_item">招商系统</div>
              </el-menu-item>
              <el-menu-item index="/jdselectgoods/business" style="float:right">
                <div class="menu_item">商家信息墙</div>
              </el-menu-item>
              <el-menu-item index="/jdselectgoods/supercdr" style="float:right">
                <div class="menu_item">超市素材库</div>
              </el-menu-item>
              <!-- <el-submenu index="2">
                <template slot="title">实时榜单</template>
                <el-menu-item index="2-1">实时爆单榜</el-menu-item>
                <el-menu-item index="2-2">今日爆单榜</el-menu-item>
                <el-menu-item index="2-3">昨日爆单榜</el-menu-item>
                <el-menu-item index="2-4">出单指数榜</el-menu-item>
              </el-submenu>-->
            </el-menu>
          </div>
        </div>
      </div>
      <div class="pagemain">
        <transition
          enter-active-class="animated fadeIn "
          leave-active-class="animated fadeOut "
          mode="out-in"
        >
          <router-view ref="allgoods" />
        </transition>
      </div>
    </div>
    <div class="sidebar" v-if="$route.name!=='allgoods'&&$route.name!=='realtimelist'" >
      <!-- <div class="pagebox">{{ currentPage }}/{{ max_page }}</div> -->
      <div class="btns">
        <!-- <p @click="gonext(1)">
          向上一页
        </p>
        <p @click="gonext(2)">
          向下一页
        </p> -->
        <p>
          <router-link to="/help">
            帮助中心
          </router-link>
        </p>
        <p>
          建议反馈
        </p>
        <p>
          <a href="tencent://message/?Site=dounm.com&uin=756589657&Menu=yes" target="_blank" rel="noopener noreferrer">联系客服</a> 
        </p>
        <!-- <p>
          一键复制
        </p> -->
      </div>
      <backtop
        transitionName="fade"
        :customStyle="backtopStyle" 
        :visibilityHeight="0" 
        :backPosition="0"
      ></backtop>
    </div>
  </div>
</template>

<script>
import logo from '@/components/logo.vue'
import { getWebInfo } from '@/api/login'
  import backtop from '@/components/backtop'

export default {
  name: 'Jdselectgoods',
  components: {
    logo,
    backtop
  },
  data() {
    return {
       backtopStyle: {
        'right': '100px',
        'bottom': '150px',
        'width': '40px',
        'height': '40px',
        'border-radius': '20px',
        'line-height': '40px', 
        'background': '#fff'
      },
      number: '',
      tweenedNumber: '',
      searchshow: false,
      mainifoshow: false,
      maininfo: {
        today_coupon_num: 0, //今日领卷数
        zx_count: 0, //在线商品数
        today_num: 0, //今日总销量
        commission: 0, //今日佣金
        day: 0, //运营天数
        today_top_num: 0, //上单商品数量
        today_user_num: 0, //今日用户数
        shop_num: 0 //商家数量
      },
      name: '', //用户名
      logined: this.$ls.get('token') ? true : false,
      searchipt: '', //搜索
      searchchoose: '1', //搜索分类
      token: this.$ls.get('token'),
      webform: {
        today_coupon_num: '0', //今日领卷数
        zx_count: 0, //在线商品数
        today_num: '', //今日总销量
        commission: '0', //今日佣金
        day: 0, //运营天数
        today_top_num: 0, //上单商品数量
        today_user_num: 0, //今日用户数
        shop_num: 0 //商家数量
      }
    }
  },
  watch: {
    number: function(newValue) {
      console.log(newValue)
      // gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    },
    $route(to, from) {
      // console.log('router',to.path)
      if (to.path !== '/jdselectgoods/allgoods') {
        this.clearsearch()
      }
    },
    searchipt: {
      handler() {
        // console.log("内容", this.searchipt);
        this.$ls.set('search', this.searchipt)
      }
      // immediate: true,  //刷新加载 立马触发一次handler
      // deep: true  // 可以深度检测到对象的属性值的变化
    }
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0)
    }
  },
  created() {
    console.log(this.$route.name)
    if (this.$ls.get('userinfo')) {
      this.logined = true
      this.name = this.$ls.get('userinfo').nickname
    }
    if (this.$ls.get('search')) {
      // console.log(this.$ls.get("search"));
      this.searchipt = this.$ls.get('search')
    }
    this.getWebInfo()
  },
  mounted() {
    this.$router.afterEach(() => {
      // to, from, next
      window.scrollTo(0, 0)
    })
    window.addEventListener('scroll', this.showIpt)
  },
  methods: {
    ismyriad(val) {
      const str = '' + val
      if (str.length > 4) {
        return str.substring(0, str.length - 4) + '万+'
      } else {
        return val
      }
    },
    //获取网站运营数据
    getWebInfo() {
      getWebInfo()
        .then(res => {
          if (res.code == 200) {
            console.log('运营数据返回', res)
            this.maininfo = res.data

            this.maininfo.today_coupon_num = this.ismyriad(
              this.maininfo.today_coupon_num
            )
            this.maininfo.zx_count = this.ismyriad(this.maininfo.zx_count)
            this.maininfo.today_num = this.ismyriad(this.maininfo.today_num)
            this.maininfo.commission = this.ismyriad(this.maininfo.commission)
            this.maininfo.day = this.ismyriad(this.maininfo.day)
            this.maininfo.today_top_num = this.ismyriad(
              this.maininfo.today_top_num
            )
            this.maininfo.today_user_num = this.ismyriad(
              this.maininfo.today_user_num
            )
            this.maininfo.shop_num = this.ismyriad(this.maininfo.shop_num)
            // console.log(this.maininfo)
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    dologinout() {
      this.$ls.clear()
      if (this.$route.name === 'homepage') {
        this.$refs.allgoods.logined = false
      }
      this.$message.success('退出成功')
      this.logined = false
    },
    clearsearch() {
      this.searchipt = ''
      this.$ls.remove('search')
      if (this.$route.name === 'allgoods') {
        this.$refs.allgoods.closetags('search')
        this.$refs.allgoods.getGoodsList()
      }
    },
    showIpt() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 150
      ) {
        // 页面高度大于200执行操作;
        this.searchshow = true
      } else {
        this.searchshow = false
        // 页面高度小于200执行操作;
      }
    },
    dosearch() {
      // console.log(this.searchipt)
      // console.log(this.$route);
      if (this.searchipt == '') {
        this.$ls.remove('search')
      }
      if (this.$route.name === 'allgoods') {
        this.$refs.allgoods.search({ search: this.searchipt }) // 调用子组件的方法childClick
        // this.$router.go(0);
      } else {
        this.$router.push({
          path: '/jdselectgoods/allgoods'
        })
      }
    },
    hotSearch(kw) {
      this.searchipt = kw
      this.dosearch()
    }
  }
}
</script>

<style lang="less" scoped>
.jdselectgoods {
  width: 100%;
  .jdselectgoods_main {
    // width: 1280px;
    margin: 0 auto;
    .top {
      width: 100%;
      height: 40px;
      font-size: 14px;
      line-height: 40px;
      position: sticky;
      top: 0;
      background-color: #f8f8f8;
      z-index: 99;
      .top_main {
        // background-color: #e6e6e6;
        font-size: 12px;
        width: 1280px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: rgb(136, 134, 134);
        .top_left {
          // width: 220px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .top_center::v-deep {
          .el-input__inner {
            height: 30px;
            width: 350px !important;
            // padding-left: 120px !important;
          }
          .el-radio-button__inner {
            padding: 8px 15px;
          }
          .el-radio-group {
            margin-left: -4px;
          }

          .el-input__icon {
            line-height: 30px;
          }
        }
        .top_right {
          width: 300px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .hot {
            position: relative;
            img {
              position: absolute;
              top: 0;
              right: -8px;
            }
          }
        }
      }
    }
    .header {
      width: 100%;
      background-color: #ffffff;
      // margin-top: 30px;
      .header_main {
        width: 1280px;
        height: 130px;
        // overflow: hidden;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* padding-top: 20px; */
        padding-bottom: 10px;
        // .header_left {
        //   font-size: 30px;
        // }
        .header_search {
          width: 520px;
          padding-top: 10px;
          .search_top {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .search_ipt::v-deep {
              // overflow: hidden;
              width: 400px;
              .el-input__inner {
                border: 1.5px solid rgb(41, 123, 247);
                border-radius: 8px;
                border-top-right-radius: 0px;
                border-bottom-right-radius: 0px;
              }
            }
            .searchipt_box::v-deep {
              width: 500px;
              .el-input__inner {
                padding-left: 85px;
                height: 41px;
                border-top-right-radius: 0px;
                border-bottom-right-radius: 0px;
              }
              .el-radio-button__inner {
                padding: 11px 5px;
                border: 0px solid #dcdfe6;
              }
              .el-radio-button__orig-radio:checked + .el-radio-button__inner {
                color: #0008ff;
                background-color: #ffffff;
                border-color: #ffffff;
                box-shadow: 0px 0 0 0 #409eff;
              }
            }
            .el-button {
              // border: 1px solid rgb(41, 123, 247);
              height: 40px;
              border-radius: 8px;
              border-top-left-radius: 0px;
              border-bottom-left-radius: 0px;
              background: linear-gradient(
                -90deg,
                rgba(142, 107, 255, 1),
                rgba(80, 134, 255, 1)
              );
            }
          }
          .search_hot {
            width: 400px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 12px;
            color: #999999;
            a {
              margin-left: 8px;
              padding-top: 5px;
            }
          }
        }
        .header_action {
          width: 300px;
          height: 68px;
          background-color: #fafafa;
          z-index: 20;
          .header_right {
            background-color: #fafafa;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            position: relative;
            .head_title {
              margin: 0;
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #666666;
            }
            .head_num {
              margin: 0;
              margin-top: 4px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #4d75ff;
            }
            .display {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              box-sizing: border-box;
              padding: 3px;
            }
          }
        }
      }
      .header_menu {
        width: 100%;
        background-color: #ffffff;
        border-top: 1px solid #f9f9f9;
        //border-bottom: 1px solid #f9f9f9;
        box-shadow: 0 10px 10px 0px hsla(0, 0%, 0%, 0.05);
        .menu_main::v-deep {
          width: 1280px;
          margin: 0 auto;
          .el-badge__content.is-fixed {
            top: 3px;
            right: 22px;
          }
          .menu__item {
            font-weight: 500;
            font-size: 14px;
            // line-height: 42px;
            text-align: center;
            font-family: PingFang SC;
          }
          .el-menu {
            border-bottom: 0px solid #409eff;
          }
          .el-menu-item {
            width: 120px;
            height: 42px;
            line-height: 42px;
          }
          .el-menu-item:hover {
            color: #fff !important;
            background: linear-gradient(180deg, #599efd, #4d74ff);
            border-bottom: 0px solid #409eff;
          }
          .is-active {
            font-weight: 600;
            color: #fff;
            border-bottom: 0px solid #409eff;
            background: linear-gradient(180deg, #599efd, #4d74ff);
          }
        }
      }
    }
  }
  .sidebar {
      position: fixed;
      top: 50%;
      right: 20px;
      // border: 1px solid #E7E7E7;
      margin: 10px 0;
      width: 50px;
      border-radius: 3px;
      box-shadow: 0 0 6px #eee;
      .pagebox{
        width: 100%;
        color: #4d75ff;
        font-size: 14px;
        padding-bottom: 6px;
        text-align: center;
        background-color: #F6F6F6;
      }
      .btns{
        display:flex;
        flex-wrap:wrap;
        background-color: #fff;
      }
      /deep/.el-icon-download{
        transform: rotate(180deg);
        border: 1px solid #E7E7E7;
        display: block;
        width: 50px;
        height: 43px;
        line-height: 40px;
        background: #fff;
        border-radius: 3px;
        font-size: 26px;
        font-weight: bold;
        color: #4d75ff;
        cursor: pointer;
        margin-top: 10  px;
        // box-shadow: 0 0 12px #eee;
      }
      p {
        display: block;
        width: 100%;
        font-size: 12px;
        color: #666;
        border-top: 1px solid #E7E7E7;
        padding: 6px 6px;
        letter-spacing: 2px;
        text-align: center;
        cursor: pointer;
      }
      p:hover{
        color: #4d75ff;
      }
  }
}
</style>
